<template>
  <div class="blood-pressure-tracking">
    <!-- 顶部状态栏 -->
    <div class="status-bar">
      <div class="status-left">9:41</div>
      <div class="status-right">
        <div class="signal"></div>
        <div class="wifi"></div>
        <div class="battery"></div>
      </div>
    </div>

    <!-- 头部导航 -->
    <div class="header">
      <div class="back-button" @click="goBack">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
          <path d="M19 12H5M12 19l-7-7 7-7"/>
        </svg>
      </div>
      <h1 class="title">血压</h1>
      <div class="header-actions">
        <div class="add-button" @click="showAddBP = true">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
            <line x1="12" y1="5" x2="12" y2="19"/>
            <line x1="5" y1="12" x2="19" y2="12"/>
          </svg>
        </div>
      </div>
    </div>

    <!-- 时间筛选标签 -->
    <div class="time-tabs">
      <div
        v-for="tab in timeTabs"
        :key="tab.key"
        :class="['time-tab', { active: activeTimeTab === tab.key }]"
        @click="setTimeTab(tab.key)"
      >
        {{ tab.label }}
      </div>
    </div>

    <!-- 平均血压 -->
    <div class="average-section">
      <h3 class="section-title">平均血压</h3>
      <div class="bp-cards">
        <div class="bp-card">
          <div class="bp-label">高压</div>
          <div class="bp-value">
            <span class="value">{{ averageSystolic }}</span>
            <span class="unit">mmHg</span>
          </div>
        </div>
        <div class="bp-card">
          <div class="bp-label">低压</div>
          <div class="bp-value">
            <span class="value">{{ averageDiastolic }}</span>
            <span class="unit">mmHg</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 图表 -->
    <div class="chart-section">
      <div class="chart-header">
        <h3 class="section-title">图表</h3>
        <div class="chart-legend">
          <div class="legend-item">
            <div class="legend-color systolic"></div>
            <span class="legend-text">收缩压</span>
          </div>
          <div class="legend-item">
            <div class="legend-color diastolic"></div>
            <span class="legend-text">舒张压</span>
          </div>
        </div>
      </div>
      <div class="chart-container">
        <svg class="bp-chart" width="100%" height="200" viewBox="0 0 400 200">
          <!-- 背景网格 -->
          <defs>
            <pattern id="bpGrid" width="50" height="20" patternUnits="userSpaceOnUse">
              <path d="M 50 0 L 0 0 0 20" fill="none" stroke="#E0E0E0" stroke-width="0.5"/>
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#bpGrid)"/>
          
          <!-- Y轴标签 -->
          <text x="30" y="20" class="axis-label">180</text>
          <text x="30" y="50" class="axis-label">120</text>
          <text x="30" y="80" class="axis-label">80</text>
          <text x="30" y="110" class="axis-label">40</text>
          <text x="30" y="140" class="axis-label">0</text>
          <text x="30" y="170" class="axis-label">-40</text>
          <text x="30" y="200" class="axis-label">-80</text>
          
          <!-- 血压柱状图 -->
          <g v-for="(data, index) in chartData" :key="index">
            <!-- 收缩压柱 -->
            <rect
              :x="data.x"
              :y="data.systolicY"
              :width="data.width"
              :height="data.systolicHeight"
              fill="#00BCD4"
              rx="2"
            />
            <!-- 舒张压柱 -->
            <rect
              :x="data.x"
              :y="data.diastolicY"
              :width="data.width"
              :height="data.diastolicHeight"
              fill="#2196F3"
              rx="2"
            />
            <!-- 数值标签 -->
            <text :x="data.x + data.width/2" :y="data.systolicY - 5" class="value-label" text-anchor="middle">
              {{ data.systolic }}
            </text>
            <text :x="data.x + data.width/2" :y="data.diastolicY + data.diastolicHeight + 15" class="value-label" text-anchor="middle">
              {{ data.diastolic }}
            </text>
          </g>
          
          <!-- X轴标签 -->
          <g v-for="(label, index) in xAxisLabels" :key="`label-${index}`">
            <text :x="label.x" :y="label.y" class="axis-label" text-anchor="middle">
              {{ label.text }}
            </text>
          </g>
        </svg>
      </div>
    </div>

    <!-- 血压状态 -->
    <div class="status-section">
      <h3 class="section-title">血压状态</h3>
      <div class="status-card" :class="bpStatusClass">
        <div class="status-icon">
          <svg v-if="bpStatus === 'normal'" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polyline points="20,6 9,17 4,12"/>
          </svg>
          <svg v-else-if="bpStatus === 'elevated'" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
            <line x1="12" y1="9" x2="12" y2="13"/>
            <line x1="12" y1="17" x2="12.01" y2="17"/>
          </svg>
          <svg v-else width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="12" cy="12" r="10"/>
            <line x1="15" y1="9" x2="9" y2="15"/>
            <line x1="9" y1="9" x2="15" y2="15"/>
          </svg>
        </div>
        <div class="status-content">
          <div class="status-title">{{ bpStatusText }}</div>
          <div class="status-description">{{ bpStatusDescription }}</div>
        </div>
      </div>
    </div>

    <!-- 历史记录 -->
    <div class="history-section">
      <h3 class="section-title">历史记录</h3>
      <div class="history-list">
        <div
          v-for="record in historyRecords"
          :key="record.id"
          class="history-item"
        >
          <div class="history-time">
            <div class="time">{{ record.time }}</div>
            <div class="date">{{ record.date }}</div>
          </div>
          <div class="history-bp">
            <div class="bp-values">
              <span class="systolic">{{ record.systolic }}</span>
              <span class="separator">/</span>
              <span class="diastolic">{{ record.diastolic }}</span>
              <span class="unit">mmHg</span>
            </div>
            <div class="bp-pulse">心率: {{ record.pulse }}bpm</div>
          </div>
          <div class="history-status">
            <div class="status-badge" :class="record.status">
              {{ record.statusText }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 添加血压记录弹窗 -->
    <div class="modal-overlay" v-if="showAddBP" @click="showAddBP = false">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>添加血压记录</h3>
          <div class="close-button" @click="showAddBP = false">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <line x1="18" y1="6" x2="6" y2="18"/>
              <line x1="6" y1="6" x2="18" y2="18"/>
            </svg>
          </div>
        </div>
        <div class="modal-body">
          <div class="input-group">
            <label>收缩压 (mmHg)</label>
            <input
              v-model="newSystolic"
              type="number"
              placeholder="请输入收缩压"
              class="bp-input"
            />
          </div>
          <div class="input-group">
            <label>舒张压 (mmHg)</label>
            <input
              v-model="newDiastolic"
              type="number"
              placeholder="请输入舒张压"
              class="bp-input"
            />
          </div>
          <div class="input-group">
            <label>心率 (bpm)</label>
            <input
              v-model="newPulse"
              type="number"
              placeholder="请输入心率"
              class="pulse-input"
            />
          </div>
        </div>
        <div class="modal-footer">
          <button class="cancel-button" @click="showAddBP = false">取消</button>
          <button class="confirm-button" @click="addBPRecord">确认</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 响应式数据
const activeTimeTab = ref('day')
const averageSystolic = ref(144)
const averageDiastolic = ref(72)
const showAddBP = ref(false)
const newSystolic = ref('')
const newDiastolic = ref('')
const newPulse = ref('')

// 时间标签
const timeTabs = [
  { key: 'day', label: '日' },
  { key: 'week', label: '周' },
  { key: 'month', label: '月' }
]

// 图表数据
const chartData = ref([
  { x: 50, systolic: 140, diastolic: 85, systolicY: 60, diastolicY: 115, systolicHeight: 40, diastolicHeight: 30, width: 30 },
  { x: 100, systolic: 145, diastolic: 88, systolicY: 55, diastolicY: 112, systolicHeight: 45, diastolicHeight: 33, width: 30 },
  { x: 150, systolic: 150, diastolic: 90, systolicY: 50, diastolicY: 110, systolicHeight: 50, diastolicHeight: 35, width: 30 },
  { x: 200, systolic: 155, diastolic: 92, systolicY: 45, diastolicY: 108, systolicHeight: 55, diastolicHeight: 37, width: 30 },
  { x: 250, systolic: 148, diastolic: 87, systolicY: 52, diastolicY: 113, systolicHeight: 48, diastolicHeight: 32, width: 30 },
  { x: 300, systolic: 142, diastolic: 83, systolicY: 58, diastolicY: 117, systolicHeight: 42, diastolicHeight: 28, width: 30 },
  { x: 350, systolic: 138, diastolic: 80, systolicY: 62, diastolicY: 120, systolicHeight: 38, diastolicHeight: 25, width: 30 }
])

const xAxisLabels = ref([
  { x: 65, y: 220, text: '8' },
  { x: 115, y: 220, text: '10' },
  { x: 165, y: 220, text: '12' },
  { x: 215, y: 220, text: '14' },
  { x: 265, y: 220, text: '16' },
  { x: 315, y: 220, text: '18' },
  { x: 365, y: 220, text: '20' }
])

// 历史记录
const historyRecords = ref([
  {
    id: 1,
    time: '20:30',
    date: '12/15',
    systolic: 138,
    diastolic: 80,
    pulse: 72,
    status: 'normal',
    statusText: '正常'
  },
  {
    id: 2,
    time: '16:45',
    date: '12/15',
    systolic: 142,
    diastolic: 83,
    pulse: 75,
    status: 'normal',
    statusText: '正常'
  },
  {
    id: 3,
    time: '12:20',
    date: '12/15',
    systolic: 148,
    diastolic: 87,
    pulse: 78,
    status: 'elevated',
    statusText: '偏高'
  },
  {
    id: 4,
    time: '08:15',
    date: '12/15',
    systolic: 135,
    diastolic: 78,
    pulse: 70,
    status: 'normal',
    statusText: '正常'
  },
  {
    id: 5,
    time: '20:30',
    date: '12/14',
    systolic: 140,
    diastolic: 82,
    pulse: 73,
    status: 'normal',
    statusText: '正常'
  }
])

// 计算属性
const bpStatus = computed(() => {
  const systolic = averageSystolic.value
  const diastolic = averageDiastolic.value
  
  if (systolic < 120 && diastolic < 80) {
    return 'normal'
  } else if (systolic >= 120 && systolic < 130 && diastolic < 80) {
    return 'elevated'
  } else if (systolic >= 130 || diastolic >= 80) {
    return 'high'
  }
  return 'normal'
})

const bpStatusClass = computed(() => {
  return {
    'status-normal': bpStatus.value === 'normal',
    'status-elevated': bpStatus.value === 'elevated',
    'status-high': bpStatus.value === 'high'
  }
})

const bpStatusText = computed(() => {
  switch (bpStatus.value) {
    case 'normal': return '血压正常'
    case 'elevated': return '血压偏高'
    case 'high': return '血压过高'
    default: return '血压正常'
  }
})

const bpStatusDescription = computed(() => {
  switch (bpStatus.value) {
    case 'normal': return '您的血压在正常范围内，请继续保持健康的生活方式'
    case 'elevated': return '您的血压略高于正常值，建议减少盐分摄入，增加运动'
    case 'high': return '您的血压过高，建议及时就医，调整生活方式'
    default: return '您的血压在正常范围内'
  }
})

// 方法
const goBack = () => {
  router.back()
}

const setTimeTab = (tab: string) => {
  activeTimeTab.value = tab
  updateDataByTimeTab(tab)
}

const updateDataByTimeTab = (tab: string) => {
  // 根据时间标签更新数据
  if (tab === 'day') {
    averageSystolic.value = 144
    averageDiastolic.value = 72
    // 更新图表数据为日数据
    chartData.value = [
      { x: 50, systolic: 140, diastolic: 85, systolicY: 60, diastolicY: 115, systolicHeight: 40, diastolicHeight: 30, width: 30 },
      { x: 100, systolic: 145, diastolic: 88, systolicY: 55, diastolicY: 112, systolicHeight: 45, diastolicHeight: 33, width: 30 },
      { x: 150, systolic: 150, diastolic: 90, systolicY: 50, diastolicY: 110, systolicHeight: 50, diastolicHeight: 35, width: 30 },
      { x: 200, systolic: 155, diastolic: 92, systolicY: 45, diastolicY: 108, systolicHeight: 55, diastolicHeight: 37, width: 30 },
      { x: 250, systolic: 148, diastolic: 87, systolicY: 52, diastolicY: 113, systolicHeight: 48, diastolicHeight: 32, width: 30 },
      { x: 300, systolic: 142, diastolic: 83, systolicY: 58, diastolicY: 117, systolicHeight: 42, diastolicHeight: 28, width: 30 },
      { x: 350, systolic: 138, diastolic: 80, systolicY: 62, diastolicY: 120, systolicHeight: 38, diastolicHeight: 25, width: 30 }
    ]
    xAxisLabels.value = [
      { x: 65, y: 220, text: '8' },
      { x: 115, y: 220, text: '10' },
      { x: 165, y: 220, text: '12' },
      { x: 215, y: 220, text: '14' },
      { x: 265, y: 220, text: '16' },
      { x: 315, y: 220, text: '18' },
      { x: 365, y: 220, text: '20' }
    ]
  } else if (tab === 'week') {
    averageSystolic.value = 146
    averageDiastolic.value = 84
    // 更新图表数据为周数据
    chartData.value = [
      { x: 50, systolic: 142, diastolic: 82, systolicY: 58, diastolicY: 118, systolicHeight: 42, diastolicHeight: 27, width: 40 },
      { x: 100, systolic: 145, diastolic: 85, systolicY: 55, diastolicY: 115, systolicHeight: 45, diastolicHeight: 30, width: 40 },
      { x: 150, systolic: 148, diastolic: 87, systolicY: 52, diastolicY: 113, systolicHeight: 48, diastolicHeight: 32, width: 40 },
      { x: 200, systolic: 150, diastolic: 89, systolicY: 50, diastolicY: 111, systolicHeight: 50, diastolicHeight: 34, width: 40 },
      { x: 250, systolic: 147, diastolic: 86, systolicY: 53, diastolicY: 114, systolicHeight: 47, diastolicHeight: 31, width: 40 },
      { x: 300, systolic: 144, diastolic: 83, systolicY: 56, diastolicY: 117, systolicHeight: 44, diastolicHeight: 28, width: 40 },
      { x: 350, systolic: 141, diastolic: 81, systolicY: 59, diastolicY: 119, systolicHeight: 41, diastolicHeight: 26, width: 40 }
    ]
    xAxisLabels.value = [
      { x: 70, y: 220, text: '周一' },
      { x: 120, y: 220, text: '周二' },
      { x: 170, y: 220, text: '周三' },
      { x: 220, y: 220, text: '周四' },
      { x: 270, y: 220, text: '周五' },
      { x: 320, y: 220, text: '周六' },
      { x: 370, y: 220, text: '周日' }
    ]
  } else if (tab === 'month') {
    averageSystolic.value = 143
    averageDiastolic.value = 81
    // 更新图表数据为月数据
    chartData.value = [
      { x: 50, systolic: 140, diastolic: 80, systolicY: 60, diastolicY: 120, systolicHeight: 40, diastolicHeight: 25, width: 25 },
      { x: 85, systolic: 142, diastolic: 82, systolicY: 58, diastolicY: 118, systolicHeight: 42, diastolicHeight: 27, width: 25 },
      { x: 120, systolic: 145, diastolic: 84, systolicY: 55, diastolicY: 116, systolicHeight: 45, diastolicHeight: 29, width: 25 },
      { x: 155, systolic: 147, diastolic: 86, systolicY: 53, diastolicY: 114, systolicHeight: 47, diastolicHeight: 31, width: 25 },
      { x: 190, systolic: 149, diastolic: 88, systolicY: 51, diastolicY: 112, systolicHeight: 49, diastolicHeight: 33, width: 25 },
      { x: 225, systolic: 146, diastolic: 85, systolicY: 54, diastolicY: 115, systolicHeight: 46, diastolicHeight: 30, width: 25 },
      { x: 260, systolic: 143, diastolic: 83, systolicY: 57, diastolicY: 117, systolicHeight: 43, diastolicHeight: 28, width: 25 },
      { x: 295, systolic: 141, diastolic: 81, systolicY: 59, diastolicY: 119, systolicHeight: 41, diastolicHeight: 26, width: 25 },
      { x: 330, systolic: 139, diastolic: 79, systolicY: 61, diastolicY: 121, systolicHeight: 39, diastolicHeight: 24, width: 25 },
      { x: 365, systolic: 137, diastolic: 78, systolicY: 63, diastolicY: 122, systolicHeight: 37, diastolicHeight: 23, width: 25 }
    ]
    xAxisLabels.value = [
      { x: 62, y: 220, text: '1' },
      { x: 97, y: 220, text: '5' },
      { x: 132, y: 220, text: '10' },
      { x: 167, y: 220, text: '15' },
      { x: 202, y: 220, text: '20' },
      { x: 237, y: 220, text: '25' },
      { x: 272, y: 220, text: '30' }
    ]
  }
}

const addBPRecord = () => {
  if (newSystolic.value && newDiastolic.value && newPulse.value) {
    const systolic = parseInt(newSystolic.value)
    const diastolic = parseInt(newDiastolic.value)
    const pulse = parseInt(newPulse.value)
    
    // 更新平均血压
    const totalRecords = historyRecords.value.length + 1
    averageSystolic.value = Math.round((averageSystolic.value * (totalRecords - 1) + systolic) / totalRecords)
    averageDiastolic.value = Math.round((averageDiastolic.value * (totalRecords - 1) + diastolic) / totalRecords)
    
    // 确定状态
    let status = 'normal'
    let statusText = '正常'
    if (systolic >= 130 || diastolic >= 80) {
      status = 'high'
      statusText = '过高'
    } else if (systolic >= 120 && systolic < 130 && diastolic < 80) {
      status = 'elevated'
      statusText = '偏高'
    }
    
    // 添加到历史记录
    const now = new Date()
    const newRecord = {
      id: historyRecords.value.length + 1,
      time: `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`,
      date: `${(now.getMonth() + 1).toString().padStart(2, '0')}/${now.getDate().toString().padStart(2, '0')}`,
      systolic: systolic,
      diastolic: diastolic,
      pulse: pulse,
      status: status,
      statusText: statusText
    }
    
    historyRecords.value.unshift(newRecord)
    
    // 清空输入
    newSystolic.value = ''
    newDiastolic.value = ''
    newPulse.value = ''
    showAddBP.value = false
  }
}

onMounted(() => {
  updateDataByTimeTab('day')
})
</script>

<style scoped lang="scss">
.blood-pressure-tracking {
  min-height: 100vh;
  background: #f5f5f5;
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 600;
  background: #2196F3;
  color: white;
  
  .status-right {
    display: flex;
    align-items: center;
    gap: 4px;
    
    .signal, .wifi, .battery {
      width: 16px;
      height: 8px;
      background: white;
      border-radius: 2px;
    }
  }
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: #2196F3;
  color: white;
  
  .back-button {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:hover {
      background: rgba(255, 255, 255, 0.2);
    }
  }
  
  .title {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
  }
  
  .header-actions {
    display: flex;
    gap: 8px;
    
    .add-button {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      cursor: pointer;
      transition: all 0.3s ease;
      
      &:hover {
        background: rgba(255, 255, 255, 0.2);
      }
    }
  }
}

.time-tabs {
  display: flex;
  justify-content: center;
  gap: 0;
  background: #2196F3;
  padding: 0 20px 16px;
  
  .time-tab {
    flex: 1;
    padding: 8px 16px;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
    
    &.active {
      color: white;
      border-bottom-color: white;
      font-weight: 600;
    }
    
    &:hover {
      color: white;
    }
  }
}

.average-section {
  padding: 20px;
  
  .section-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px 0;
    color: #333;
  }
  
  .bp-cards {
    display: flex;
    gap: 16px;
    
    .bp-card {
      flex: 1;
      background: white;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      
      .bp-label {
        font-size: 14px;
        color: #666;
        margin-bottom: 8px;
      }
      
      .bp-value {
        .value {
          font-size: 28px;
          font-weight: 700;
          color: #2196F3;
        }
        
        .unit {
          font-size: 14px;
          color: #666;
          margin-left: 4px;
        }
      }
    }
  }
}

.chart-section {
  padding: 0 20px 20px;
  
  .chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    
    .section-title {
      font-size: 16px;
      font-weight: 600;
      margin: 0;
      color: #333;
    }
    
    .chart-legend {
      display: flex;
      gap: 16px;
      
      .legend-item {
        display: flex;
        align-items: center;
        gap: 6px;
        
        .legend-color {
          width: 12px;
          height: 12px;
          border-radius: 2px;
          
          &.systolic {
            background: #00BCD4;
          }
          
          &.diastolic {
            background: #2196F3;
          }
        }
        
        .legend-text {
          font-size: 12px;
          color: #666;
        }
      }
    }
  }
  
  .chart-container {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    .bp-chart {
      .axis-label {
        font-size: 10px;
        fill: #666;
      }
      
      .value-label {
        font-size: 10px;
        fill: #333;
        font-weight: 500;
      }
    }
  }
}

.status-section {
  padding: 0 20px 20px;
  
  .section-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px 0;
    color: #333;
  }
  
  .status-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    &.status-normal {
      border-left: 4px solid #4CAF50;
      
      .status-icon {
        color: #4CAF50;
      }
    }
    
    &.status-elevated {
      border-left: 4px solid #FF9800;
      
      .status-icon {
        color: #FF9800;
      }
    }
    
    &.status-high {
      border-left: 4px solid #F44336;
      
      .status-icon {
        color: #F44336;
      }
    }
    
    .status-icon {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.05);
    }
    
    .status-content {
      flex: 1;
      
      .status-title {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 4px;
      }
      
      .status-description {
        font-size: 14px;
        color: #666;
        line-height: 1.4;
      }
    }
  }
}

.history-section {
  padding: 0 20px 20px;
  
  .section-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px 0;
    color: #333;
  }
  
  .history-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    
    .history-item {
      display: flex;
      align-items: center;
      background: white;
      border-radius: 12px;
      padding: 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      
      .history-time {
        flex: 1;
        
        .time {
          font-size: 16px;
          font-weight: 600;
          color: #333;
        }
        
        .date {
          font-size: 12px;
          color: #666;
          margin-top: 2px;
        }
      }
      
      .history-bp {
        flex: 2;
        text-align: center;
        
        .bp-values {
          font-size: 18px;
          font-weight: 600;
          color: #2196F3;
          
          .separator {
            margin: 0 4px;
            color: #666;
          }
          
          .unit {
            font-size: 12px;
            color: #666;
            margin-left: 4px;
            font-weight: normal;
          }
        }
        
        .bp-pulse {
          font-size: 12px;
          color: #666;
          margin-top: 4px;
        }
      }
      
      .history-status {
        .status-badge {
          padding: 4px 12px;
          border-radius: 12px;
          font-size: 12px;
          font-weight: 500;
          
          &.normal {
            background: rgba(76, 175, 80, 0.1);
            color: #4CAF50;
          }
          
          &.elevated {
            background: rgba(255, 152, 0, 0.1);
            color: #FF9800;
          }
          
          &.high {
            background: rgba(244, 67, 54, 0.1);
            color: #F44336;
          }
        }
      }
    }
  }
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  
  .modal-content {
    background: white;
    border-radius: 16px;
    width: 90%;
    max-width: 400px;
    color: #333;
    
    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      border-bottom: 1px solid #eee;
      
      h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
      }
      
      .close-button {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        cursor: pointer;
        transition: background-color 0.3s ease;
        
        &:hover {
          background: #f5f5f5;
        }
      }
    }
    
    .modal-body {
      padding: 20px;
      
      .input-group {
        margin-bottom: 16px;
        
        label {
          display: block;
          font-size: 14px;
          font-weight: 500;
          margin-bottom: 8px;
          color: #666;
        }
        
        input {
          width: 100%;
          padding: 12px;
          border: 1px solid #ddd;
          border-radius: 8px;
          font-size: 16px;
          transition: border-color 0.3s ease;
          
          &:focus {
            outline: none;
            border-color: #2196F3;
          }
        }
      }
    }
    
    .modal-footer {
      display: flex;
      gap: 12px;
      padding: 20px;
      border-top: 1px solid #eee;
      
      button {
        flex: 1;
        padding: 12px;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        
        &.cancel-button {
          background: #f5f5f5;
          color: #666;
          
          &:hover {
            background: #e0e0e0;
          }
        }
        
        &.confirm-button {
          background: #2196F3;
          color: white;
          
          &:hover {
            background: #1976D2;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
          }
        }
      }
    }
  }
}
</style> 